<template>
  <div>
    <el-tabs type="card" addable v-model="tabIndex" @tab-remove="onRemove" @tab-add="onAdd">
      <el-tab-pane v-for="(item, index) in tabs" :key="item.name" :label="item.label" :name="item.name">
        <Main :tab="item"></Main>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Main from './Main.vue'
export default {
  components: {
    Main
  },
  data() {
    return {
      tabIndex: 1,
      tabs: [
        {
          label: '栏目1',
          name: 1
        }
      ]
    }
  },
  methods: {
    onRemove(e) {
      console.log(e)
      let { tabs } = this
      let index = tabs.findIndex((res) => res.name == e)
      this.tabs.splice(index, 1)
      const nextTab = tabs[index + 1] || tabs[index - 1]
      if (nextTab) {
        this.tabIndex = nextTab.name
      }
    },
    onAdd() {
      let newTab = {
        label: '新页面',
        name: this.tabs.length + 1
      }
      this.tabs.push(newTab)
    }
  }
}
</script>
